<template>
    <div class="littleViewer">
        <vc-viewer :animation="animation" :timeline="timeline" @ready="ready">
            <vc-layer-imagVery :alpha="alpha" :brightness="brightness" :contrast="contrast" :sort-order="10">
                <vc-provider-imagery-amap :map-style="mapStyle" :ltype="ltype"
                    :projection-transforms="projectionTransforms"></vc-provider-imagery-amap>
            </vc-layer-imagVery>
            <vc-layer-imagery :sort-order="5">
                <vc-provider-imagery-tianditu map-style="img_w" :token="tiandituToken"></vc-provider-imagery-tianditu>
            </vc-layer-imagery>
            <vc-provider-terrain-cesium></vc-provider-terrain-cesium>
        </vc-viewer>
    </div>
</template>

<script>
export default {
    name: "LittlevCesium",
    props: {
        cesiumStaions: {
            type: Array,
            default: []
        }
    },
    watch: {
        // 监听 items 数组的变化
        cesiumStaions: {
            handler(newItems, oldItems) {
                // console.log('items 发生了变化');
                // console.log('新值:', newItems);
                // console.log('旧值:', oldItems);
                this.showAllStation();
                // 在这里可以执行一些操作，例如更新 UI 或发送请求
            },
            deep: true, // 深度监听，监听数组内部对象的变化
            immediate: false // 是否在初始绑定时就执行一次 handler
        }
    },
    data() {
        return {
            animation: false,
            timeline: false,
            tiandituToken: '269f4c6f4515f49b49674ab3d489a105',
            initialPointEntit: null,
            initPointPosition: {
                lon: 104.06,
                lat: 30.67,
                height: 100
            },
            viewer: null,
            cesium: null,

            alpha: 1,
            brightness: 1,
            contrast: 1,
            mapStyle: '6',
            ltype: '0',
            projectionTransforms: {
                form: 'BD09',
                to: 'WGS84'
            },

        };
    },
    methods: {
        ready(cesiumInstance) {

            const { Cesium, viewer } = cesiumInstance;
            this.viewer = viewer;
            this.cesium = Cesium;

            // 设置相机位置
            this.viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(this.initPointPosition.lon, this.initPointPosition.lat, 10000),
                orientation: {
                    heading: Cesium.Math.toRadians(0),
                    pitch: Cesium.Math.toRadians(-90),
                    roll: 0.0,
                },
            });

            // 缩放变小（摄像头离目标点更远）
            this.viewer.camera.zoomOut(200000);
        },
        showAllStation() {
            var stataions = this.cesiumStaions
            for (var i = 0; i < stataions.length; i++) {
                var point = this.getPoint(stataions[i]);
                this.viewer.entities.add(point);
            }
        },
        getPoint(station) {
            return {
                id: station.stationName,
                position: this.cesium.Cartesian3.fromDegrees(station.lon, station.lat, station.altitude),
                point: {
                    pixelSize: 5,
                    color: this.cesium.Color.RED,
                },
            }
        }
    },
};
</script>

<style>
.littleViewer {
    width: 100%;
    height: 400px;
    position: relative;
}

.control-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
    width: 300px;
    color: white;
}

.control-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.control-item label {
    margin-right: 10px;
    font-weight: bold;
}

.control-item .el-slider {
    flex: 1;
}
</style>